// 'use client' 必须存在否则无法使用错误边界
'use client';
import React, { Component } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

/** 默认 错误回退 UI */
export function ErrorFallback({ error, resetErrorBoundary }) {
  console.group('ErrorFallback');
  console.log('url', window.location);
  console.log('error', error);
  console.log('resetErrorBoundary', resetErrorBoundary);
  console.groupEnd();

  return (
    <div role='alert'>
      <p>Something went wrong:</p>
      <pre style={{ color: 'red' }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

/** 错误边界 */
export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    // console.error('ErrorBoundaryProps', this)
  }

  render() {
    return (
      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={this.props?.onReset?.call(this)}>
        {this.props.children}
      </ErrorBoundary>
    );
  }
}
